<template>
  <view class="page">
    <view class="container">

      <!-- 医院信息 -->
      <view class="hospital-info">
        <text class="department-name">{{ departmentName }}</text>
        <text class="hospital-name">{{ hospitalName }}</text>
      </view>

      <!-- 医生列表 -->
      <view class="doctor-list-section">
        <view class="section-header">
          <text class="section-title">医生列表</text>
          <!-- 跳转到科室全部医生页面 -->
          <text class="view-more" @click="navigateToDepartmentDoctors">查看全部</text>
        </view>

        <view
            class="doctor-item"
            v-for="(doctor, index) in doctorList"
            :key="index"
        >
          <image src="/static/doctor.png" class="doctor-avatar"></image>
          <view class="doctor-info">
            <!-- 第一行：姓名、门诊、职位 -->
            <view class="doctor-name-line">
              <text class="doctor-name">{{ doctor.name }}</text>
              <text class="doctor-department">{{ doctor.department }}</text>
              <text class="doctor-title">{{ doctor.title }}</text>
            </view>

            <!-- 第二行：坐诊位置 -->
            <text class="doctor-hospital">{{ doctor.hospital }}</text>

          </view>

          <!-- 按钮 -->
          <button
              class="register-btn"
              :class="doctor.available>0 ? 'active' : 'disabled'"
              @click="doctor.available>0 ? navigateToDoctorDetail(doctor) : null"
          >
            {{ doctor.available > 0 ? '挂号' : '约满' }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hospitalId: null,
      hospitalName: '',
      departmentName: '皮肤科',
      // 🆕 新增代码开始：医生列表数据
      doctorList: [],
    };
  },
  onLoad(options) {
    // 🆕 新增代码开始：接收医院ID并设置医院名称
    this.hospitalId = options.id || '未知';
    this.hospitalName = this.getHospitalNameById(this.hospitalId);
    // 🆕 新增代码结束
    uni.request({
      url: 'http://localhost:8080/app/registration/listDoctorsByHospitalId/' + this.hospitalId,
      method: 'GET',
      success: result => {
        console.log(result)
        if (result.statusCode == 200) {
          this.doctorList = result.data
        }
      }
    })
  },
  methods: {
    // 🆕 新增代码开始：根据ID获取医院名称
    getHospitalNameById(id) {
      const hospitals = {
        1: '北京协和医院',
        2: '北京大学第一医院',
        3: '中国人民解放军总医院（301医院）',
      };
      return hospitals[id] || '未知医院';
    },
    // 🆕 新增代码结束

    // 🆕 新增代码开始：跳转挂号页面
    registerDoctor(doctorId) {
      uni.navigateTo({
        url: `/pages/registrations/register/register?doctorId=${doctorId}`,
      });
    },
    // 🆕 新增代码结束
    // 🆕 新增代码开始：跳转到科室全部医生页面
    navigateToDepartmentDoctors() {
      uni.navigateTo({
        url: `/pages/registrations/department-doctors/department-doctors?hospitalId=${this.hospitalId}&departmentName=${this.departmentName}`,
      });
    },
    // 🆕 新增代码结束
    // 🆕 新增代码开始：跳转到医生详情页面
    navigateToDoctorDetail(doctor) {
      console.log(doctor)
      uni.navigateTo({
        url: `/pages/registrations/doctor-detail/doctor-detail?id=${this.hospitalId}&doctorId=${doctor.id}&departmentId=${doctor.departmentId}`,
      });
    },
    // 🆕 新增代码结束
  },
};
</script>

<style scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20rpx;
}

.container {
  width: 100%;
  padding: 20rpx;
}

/* 🆕 新增代码开始：医院信息样式（左对齐） */
.hospital-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 30rpx;
}

.department-name {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
}

.hospital-name {
  font-size: 26rpx;
  color: #888;
  margin-top: 10rpx;
}

/* 🆕 新增代码结束 */

/* 🆕 新增代码开始：医生列表样式 */
.doctor-list-section {
  margin-top: 40rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
}

.view-more {
  font-size: 26rpx;
  color: #999;
}

.doctor-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 12rpx;
  background-color: #fff;
  margin-top: 20rpx;
}

.doctor-avatar {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.doctor-info {
  flex: 1;
}

.doctor-name {
  display: flex;
  align-items: center;
}

.doctor-title {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #888;
}

.doctor-department,
.doctor-hospital,
.doctor-appointments {
  font-size: 26rpx;
  color: #666;
  margin-top: 10rpx;
}

.register-btn {
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  background-color: #4caf50;
  color: #fff;
  font-size: 26rpx;
}

/* 🆕 新增代码结束 */
</style>
